<template>
  <div class="body__wrapper">
    <!--hero start-->
    <section class="hero">
      <div class="hero__wrapper">
        <div class="container">
          <div class="row">
            <div class="hero__info">
              <h1>daily fitness regime<span class="dot">.</span></h1>
              <p class="paragraph">Landder+ is a free all-day activity tracker that inspires you to be more active and
                helps you to move at
                least 30 minutes every day.</p>
              <div class="hero__info__buttons">
                <a href="#" class="hero__info__button"><span>Download for iPhone</span></a>
                <a href="#" class="hero__info__button"><span>Download for Android</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="arrows__wrapper">
        <div class="hero__arrows arrows" id="arrows-1">
          <div class="arrows__arrow arrows__arrow-1" data-depth="0.1"></div>
          <div class="arrows__arrow arrows__arrow-2" data-depth="0.2"></div>
          <div class="arrows__arrow arrows__arrow-3" data-depth="0.3"></div>
          <div class="arrows__arrow arrows__arrow-4" data-depth="0.1"></div>
          <div class="arrows__arrow arrows__arrow-5" data-depth="0.1"></div>
          <div class="arrows__arrow arrows__arrow-6" data-depth="0.3"></div>
        </div>
      </div>
    </section>
    <!--hero end-->

    <!--compare start-->
    <section class="compare">
      <div class="compare__wrapper">
        <div class="compare__info--wrapper">
          <div class="container">
            <div class="compare__info">
              <div class="section-header">
                <h2 class="h2-heading light">compare with friends<span class="dot">.</span></h2>
                <p class="paragraph light">Landder+ helps you get a sense of how much you move everyday
                  and compare your activity levels with people like you. </p>.
              </div>
              <div class="compare__info__img">
                <img src="./assets/images/compare_phone.png" alt="image">
              </div>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="compare__single--wrapper">
            <div class="compare__single">
              <img src="./assets/images/compare_icon_01.png" alt="icon">
              <h3 class="h3-heading">Connect with friends</h3>
              <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
                suscipit is mattis
                adipiscing
                elit aecenas.</p>
            </div>
            <div class="compare__single">
              <img src="./assets/images/compare_icon_02.png" alt="icon">
              <h3 class="h3-heading">Daily Fitness Reports</h3>
              <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
                suscipit is mattis
                adipiscing
                elit aecenas.</p>
            </div>
            <div class="compare__single">
              <img src="./assets/images/compare_icon_03.png" alt="icon">
              <h3 class="h3-heading">Monitor Your Health</h3>
              <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
                suscipit is mattis
                adipiscing
                elit aecenas.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--compare end-->

    <!--testimonial start-->
    <section class="testimonial">
      <div class="testimonial__wrapper">
        <div class="container">
          <div class="section-header">
            <h2 class="h2-heading light">why people love us<span class="dot">.</span></h2>
            <p class="paragraph light">Landder+ helps you get a sense of how much you move everyday
              and compare your activity levels with people like you. </p>.
          </div>
          <div class="swiper-container testimonial__swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide testimonial__swiper-slide">
                <img src="./assets/images/testimonial_img_01.png" alt="testimonial-icon">
                <h3 class="h3-heading">James Bright</h3>
                <ul class="rating">
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                </ul>
                <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony
                  urna
                  suscipit is mattis adipiscing elit aecenas.</p>
              </div>
              <div class="swiper-slide testimonial__swiper-slide">
                <img src="./assets/images/testimonial_img_02.png" alt="testimonial-icon">
                <h3 class="h3-heading">Nicole Kidman</h3>
                <ul class="rating">
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                </ul>
                <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony
                  urna
                  suscipit is mattis adipiscing elit aecenas.</p>
              </div>
              <div class="swiper-slide testimonial__swiper-slide">
                <img src="./assets/images/testimonial_img_03.png" alt="testimonial-icon">
                <h3 class="h3-heading">Michael King</h3>
                <ul class="rating">
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                  <li><i class="fas fa-star"></i></li>
                </ul>
                <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony
                  urna
                  suscipit is mattis adipiscing elit aecenas.</p>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="arrows__wrapper">
        <div class="hero__arrows arrows" id="arrows-2">
          <div class="arrows__arrow arrows__arrow-1" data-depth="0.1"></div>
          <div class="arrows__arrow arrows__arrow-2" data-depth="0.2"></div>
          <div class="arrows__arrow arrows__arrow-3" data-depth="0.3"></div>
          <div class="arrows__arrow arrows__arrow-4" data-depth="0.1"></div>
          <div class="arrows__arrow arrows__arrow-5" data-depth="0.1"></div>
          <div class="arrows__arrow arrows__arrow-6" data-depth="0.3"></div>
        </div>
      </div>
    </section>
    <!--testimonial end-->

    <!--compare start-->
    <section class="compare second_count">
      <div class="compare__wrapper">
        <div class="compare__info--wrapper">
          <div class="container">
            <div class="compare__info">
              <div class="section-header">
                <h2 class="h2-heading light">every second counts<span class="dot">.</span></h2>
                <p class="paragraph light">Landder+ helps you get a sense of how much you move everyday
                  and compare your activity levels with people like you. </p>.
              </div>
              <div class="compare__info__img">
                <img src="./assets/images/compare_phone.png" alt="image">
              </div>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="compare__single--wrapper">
            <div class="hero__info">
              <h1>let’s go new places<span class="dot">.</span></h1>
              <p class="paragraph">Landder+ helps you get a sense of how much you move everyday
                and compare your activity levels with people like you.</p>
              <div class="hero__info__buttons">
                <a href="#" class="hero__info__button"><span>Download for iPhone</span></a>
                <a href="#" class="hero__info__button"><span>Download for Android</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--compare end-->
  </div>
</template>



<style scoped>
.body__wrapper{
  padding: 0rem 0 5rem 0;
}
</style>
